<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jCaramel-core-1.0.js"></script>
<script type="text/javascript" src="js/jCaramel-listview-1.0.js"></script>
<script type="text/javascript" src="js/jCaramel-treeview-1.0.js"></script>
<link rel="stylesheet" type="text/css" href="css/jCaramel.css"/>
<link rel="stylesheet" type="text/css" href="css/icons.css"/>
<style>
	body{
		font-family:Arial, Helvetica, sans-serif;
		font-size:11pt;
		 margin:0;
		 padding:0;
		 overflow:hidden;
		 
	}
	
	ul.main { position:absolute; top:35px; left:0; bottom:0; right:0; }
	
	
	.toolbar { position:absolute; top:0; left:0; right:0; height:35px; }
	
	.icon-16 { background-image:url(css/icons-16.png); }
	.icon-32 { background-image:url(css/icons-32.png); }
</style>
<script>
	
	
	
	function init(){
		
		
		
		$('ul:first').treeview({ 
				checkboxes: true,
				iconSize: 16,
				unfold: function(li, ul){
					ul.append( $('<li>')
						.append( $('<div>').addClass('icon-16') )
						.append( $('<span>').append("Hello!") )
						.append( $('<ul>') )
						.makeitem(this) )
				}
			 });
	}
	
	$(function(){		   
		setTimeout('init()', 1);
	});
</script>
</head>

<body>
	<div class="toolbar">
    	<form onsubmit="return false">
        <button>Icons 16</button>
        </form>
    </div>
    <ul class="main">
    	<li><span>First</span><ul></ul></li>
		<li><span>Second</span><ul></ul></li>
		<li><span>Third</span><ul></ul></li>
		<li><span>Fourth</span><ul></ul></li>
		<li><span>Fifth</span><ul></ul></li>
    </ul>
</body>
</html>
